<template>
  <div class="contain">
    <h3>发表评论</h3>
    <textarea placeholder="请输入评论的内容" maxlength="30"></textarea>
    <hr>
    <mt-button type="primary" size="large">发表评论</mt-button>
    <div class="com">
      <div class="com-list" v-for="(item,i)  in data":key="i">
        <div class="com-title">
          <p style="width: 80%">第{{i+1}}楼:用户:{{item.user_name}}</p>
          <P>发表时间：{{item.add_time}}</P>
        </div>
        <div class="com-body">
          <p>{{item.content}}</p>
        </div>
      </div>

    </div>
     <mt-button type="danger" size="large" @click="more">加载更多</mt-button>


  </div>

</template>
<script>
  export  default({
    data(){
      return {
        data:[],
        pageindex:1
      }
    },
    created(){
      this.getComment();
    }
    ,
    props:['id'],
    methods:{
      getComment(){

        this.$axios.get('getcomments/ '+ this.id+'?pageindex='+this.pageindex+'').then(data => {
          if (data.data.status == 0) {
            console.log(data.data.message);
            this.data=this.data.concat(data.data.message);
          }
        }).catch(error => {

        })
      },
      //加载更多
      more(){
        this.pageindex=this.pageindex+1;
         this.getComment();

      }

    }
  })
</script>
<style>
  .contain {
    font-size: 14px;
    text-align: left;
    margin: 6px 0;
  }

  textarea {
    font-size: 14px;
    height: 80px;
    margin: 0 !important;
  }

  .com-title {
    margin: 10px 0;
    line-height: 30px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    background: #eee;
  }

  .com-body {

    line-height: 30px;
    height: 30px;
    text-indent: 2em;
    background: #fff;
  }
</style>
